<template>
  <div class="unitSales index-container  ec-container">
    <el-row :gutter="10" class="form">
      <el-col :span="6">
        <div class="grid-content">
          <span>消费渠道：</span>
          <el-input class="w60 h40" v-model="fileter.chnennelCode" clearable placeholder="请输入消费渠道"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>消费平台：</span>
          <el-input class="w60 h40" v-model="fileter.platformName" clearable placeholder="请输入消费平台"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>消费店铺：</span>
          <el-input class="w60 h40" v-model="fileter.storeName" clearable placeholder="请输入消费店铺"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <span>省份：</span>
          <el-input class="w60 h40" v-model="fileter.provinceName" clearable placeholder="请输入省份"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="form">
      <el-col :span="6">
        <div class="grid-content ">
          <span>城市：</span>
          <el-input class="w60 h40" v-model="fileter.cityName" clearable  placeholder="请输入城市"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <span>商品名称：</span>
          <el-input class="w60 h40" v-model="fileter.productName" clearable  placeholder="请输入商品名称"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ">
          <el-button icon="fa fa-search" type="primary" @click="findAll()"
          >搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24">
        <div id="hotProduct" class=" grid-content"></div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="table">
      <el-col :span="24">
        <div class=" grid-content">
          <p class="title">销售商品明细</p>
          <el-table border :data="tableData" :span-method="arraySpanMethod" style="width:100%">
            <el-table-column prop="formateSaleDate"  label="付款日" width="180"></el-table-column>
            <el-table-column prop="storeCode" label="消费店号" width="150"></el-table-column>
            <el-table-column  label="消费店地点" width="150">
              <template slot-scope="scope">
                 <span>{{scope.row.provinceName+scope.row.cityName}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="productCode" label="商品ID" width="150"></el-table-column>
            <el-table-column prop="productName" label="商品名称" width="200"></el-table-column>
            <el-table-column prop="customerQuantity" label="客户数" width="200"></el-table-column>
            <el-table-column prop="totalOrderQuantity" label="订单数"></el-table-column>
            <el-table-column prop="totalSaleAmount" label="销售额"></el-table-column>
            <el-table-column prop="productQuantity" label="商品数量"></el-table-column>
            <el-table-column prop="discountRate" label="折扣率"></el-table-column>
            <el-table-column prop="customersUnitPrice" label="客单价"></el-table-column>
            <el-table-column prop="relatedRate" label="连带率"></el-table-column>
            <el-table-column prop="avgConsume" label="人均消费"></el-table-column>
            <el-table-column prop="onePiecesUnitPrice" label="件单价"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: "quantity",
    components: {},

    data() {
      return {
        fileter:{
          storeName:"",
          platformName:"",
          chnennelCode:"",
          provinceName:"",
          cityName:"",
          productName:""

        },
        spanArr:[],
        pos:0,
        tableData: [],
      };
    },

    methods: {
      //记录需要合并的单元格
      getSpanArr(data) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            this.spanArr.push(1);
            this.pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i].formateSaleDate == data[i - 1].formateSaleDate) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
            } else {
              this.spanArr.push(1);
              this.pos = i;
            }
          }
          console.log(this.spanArr)
        }
      },

      // 获取分页数据
      querySaleProductDetail: function () {
        let this_=this
        this.utils.request.querySaleProductDetail(this.fileter, function (res) {
          if (res.code == "0000") {
            this_.tableData=res.data
            this_.getSpanArr(res.data)
          }
        });
      },
      // 热销商品top10
      hotProduct() {
        let hotProduct = document.getElementById("hotProduct");
        let hotWrap = this.$echarts.init(hotProduct);
        this.utils.request.queryUnitSales(this.fileter, function (res) {
          if (res.code = "0000") {
            let option = {
              title: {
                text: "热销商品TOP10"
              },
              legend: {
                data: ["销售额"],
                textStyle: {
                  fontSize: 16
                },
                itemWidth: 40,
                itemHeight: 20
              },
              xAxis: {
                type: "category",
                data: res.data.x,
                axisLabel: {
                  interArrival: 0,
                  rotate: 30,
                  textStyle: {
                    fontSize: 14
                  }
                }
              },
              yAxis: [
                {
                  type: "value",
                }
              ],
              series: [
                {
                  name: "销售额",
                  type: "bar",
                  barWidth: "20%",
                  color: "#1ea084",
                  fontSize: 10,
                  data: res.data.y1,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true, //开启显示
                        position: "top", //在上方显示
                        textStyle: {
                          //数值样式
                          color: "black",
                          fontSize: 16
                        }
                      }
                    }
                  }
                }
              ]
            };
            hotWrap.setOption(option);
          }
        })

      },
      // 处理单元格合并
      arraySpanMethod({row, column, rowIndex, columnIndex}) {
        if (columnIndex === 0) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
            rowspan: _row,
            colspan: _col
          }
          // if (rowIndex % 3 === 0) {
          //   return {
          //     rowspan: 3,
          //     colspan: 1
          //   };
          // } else {
          //   return {
          //     rowspan: 0,
          //     rowspan: 0
          //   };
          // }
        }
      },

      //重置
      resetForm:function () {
        this.fileter={
          storeName:"",
          platformName:"",
          chnennelCode:"",
          provinceName:"",
          cityName:"",
          productName:""
        }
        this.hotProduct();
        this.querySaleProductDetail()
      },

      //查询
      findAll:function () {
        this.hotProduct();
        this.querySaleProductDetail()
      }
    },

    mounted() {
      this.hotProduct();
      this.querySaleProductDetail()
    }
  };
</script>
<style lang="scss" scoped>
 @import "../../../../assets/css/dataCenterEcharts.css";

  .ec-container {
    .form /deep/ .el-col .grid-content .el-select {
      width: 280px;
    }
    .form {
      .el-date-editor {
        width: 120px;
      }
    }
  }
</style>

